<template>
	<view class="pg-content">
		<view class="pg-main">
			<view class="pg-scroll-main ckcontent">
				<view class="ck-vitem" v-for="(item,i) in clocks" :key="i" @click="setClockStyle(item)">
					<image class="item-bg" :src="getClockImage(item)"></image>
					<text>{{item.name}}</text>
					<image v-show="item.checked" class="img-checked" src="/static/img/ok.png"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				clocks: []
			}
		},
		onLoad() {
			uni.showLoading();
			this.getAllStyle();
		},
		methods: {
			getAllStyle() {
				uni.request({
				    url: '/api/getAllClock',
				    success: (res) => {
						if (res.statusCode == 200) {
							this.clocks = res.data;
						}
				    },
					complete: () => {
						uni.hideLoading();
					}
				});
			},
			getClockImage(e) {
				return `${window.location.origin}/api/getClockBg?id=${e.imageId}`;
			},
			setClockStyle(e) {
				uni.showModal({
					title: e.name,
					content: '是否设置该样式',
					success: (res) => {
						if (res.confirm) {
							uni.showLoading();
							uni.request({
							    url: `/api/setClockStyle?tag=${e.viewTag}`,
								success: (res) => {
									var msg = res.statusCode == 200 ? "设置成功" : "设置失败";
									setTimeout(()=> {
										uni.showToast({title: msg, icon:'none'});
									}, 10);
								},
								complete: () => {
									this.getAllStyle();
								}
							});
						}
					}
				})
			}
		}
	}
</script>

<style>
	.ckcontent {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 29rpx;
		grid-auto-rows: max-content;
		padding: 26rpx;
	}
	.ck-vitem {
		position: relative;
		display: flex;
		flex-direction: column;
		height: 160px;
		gap: 10px;
	}
	.item-bg{
		border: 1px solid #ccc;
		border-radius: 12px;
		width: 100%;
		height: 100%;
	}
	.img-checked {
		position: absolute;
		top: -12rpx;
		right: -12rpx;
		width: 66rpx;
		height: 66rpx;
	}
</style>